<template>
	<wsPage title="语言服务列表">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @page-change="query">
			<div slot="list_operate">
				<Button  @click="showAddModal">新增语言</Button>
			</div>
			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%" class="emoji-list">
					<ws-table-column align="center" prop="code" label="编码"></ws-table-column>
					<ws-table-column align="center" label="国旗" width="160">
						<template slot-scope="scope">
							<span v-html="tparse(scope.row.icon)"></span>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="motherTongue" label="母语"></ws-table-column>
					<ws-table-column align="center" prop="english" label="英文"></ws-table-column>
					<ws-table-column align="center" prop="translatable" label="可翻译" width="160">
						<template slot-scope="scope">
							<Tag v-if="scope.row.translatable == 0" color="blue">不可以</Tag>
							<Tag v-if="scope.row.translatable == 1" color="green">可以</Tag>
      					</template>
					</ws-table-column>
					<ws-table-column align="center" width="100" label="操作">
						<template slot-scope="scope">
							<Button @click="showEditModal(scope.row)" type="text" size="small">编辑</Button>
							<Button @click="delModalRow(scope.row)" type="text" size="small" v-if="scope.row.sys == 1">删除</Button>
      					</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>
		
		<!--新增属性弹框-->
		<wsModal v-model="modal.show" ok-text="保存" :title="modal.title"  @on-ok="modalSave"  @on-cancel="modalCancel">
		    <Form ref="modalForm" :model="modal.form" :rules="modal.validate" :label-width="100">
		        <FormItem label="唯一编码" prop="code">
		            <Input v-model="modal.form.code" autofocus :readonly="isEdit"></Input>
		        </FormItem>
		        <FormItem label="国旗标识" prop="motherTongue">
		            <Select v-model="modal.form.icon">
		            	<Option v-for="item in fields.countrys" :value="item.code" :label="item.name">
			                <span v-html="tparse(item.code)"></span>
			                <span style="float: right;">{{item.name}}</span>
		            	</Option>
		            </Select>
		        </FormItem>
		        <FormItem label="母语" prop="motherTongue">
		            <Input v-model="modal.form.motherTongue"></Input>
		        </FormItem>
		        <FormItem label="english" prop="english">
		            <Input v-model="modal.form.english"></Input>
		        </FormItem>
		        <FormItem label="可翻译" prop="translatable">
		            <RadioGroup v-model="modal.form.translatable">
		            	<Radio :label="0">不可以</Radio>
		            	<Radio :label="1">可以</Radio>
		            </RadioGroup>
		        </FormItem>
		    </Form>			
		</wsModal>	
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
	import twemoji from 'twemoji';
	export default {
		data() {
			return {
				table: {
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				pre: {
					code: ''
				},
				fields: {
					countrys: [{
						code: "🇮🇳",
						name: '印度'
					},{
						code: "🇮🇹",
						name: '意大利'
					},{
						code: "🇸🇦",
						name: '沙特阿拉伯'
					},{
						code: "🇨🇳",
						name: '中国'
					},{
						code: "🇺🇸",
						name: '美国'
					},{
						code: "🇵🇹",
						name: '葡萄牙'
					},{
						code: "🇭🇰",
						name: '香港 HKG'
					},{
						code: "🇯🇵",
						name: '日本'
					},{
						code: "🇬🇧",
						name: '英国'
					},{
						code: "🇩🇪",
						name: '德国'
					},{
						code: "🇫🇷",
						name: '法国'
					},{
						code: "🇳🇱",
						name: '荷兰'
					},{
						code: "🇪🇸",
						name: '西班牙'
					},{
						code: "🇷🇺",
						name: '俄罗斯'
					},{
						code: "🇹🇭",
						name: '泰国'
					},{
						code: "🇧🇩",
						name: '孟加拉国'
					},{
						code: "🇰🇷",
						name: '韩国'
					}],
				},
				//新增属性弹框
				modal: {
					title: '添加平台语言',
					show: false,
					form: {
						code:'',
						icon: '',
						motherTongue: '',
						english: '',
						translatable: 0
					},
					validate: {
						code: [
	                        { required: true, message: '识别码不能为空', trigger: 'blur' }
	                    ],
						motherTongue: [
	                        { required: true, message: '母语不能为空', trigger: 'blur' }
	                    ],
	                    english: [
	                        { required: true, message: '英文不能为空'}
	                    ],
	                    translatable: [
	                        { required: true, message: '必须选择' }
	                    ]
					}
				}
			}
		},
		computed: {
			isEdit() {
		      return !Util.vad.isBlank(this.pre.code);
		    }
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.get('/ws/ops/v2/languages/' + pageSize + '/' + pageNum).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},	
			
			//刷新重置查询
			refresh(){
				this.table.data = [];
				this.table.page.total = 0;
				this.table.page.pageNum = 1; //当前页
				this.table.page.pageSize = 10; //每页显示条数
				this.query();
			},
            /**
			 * 打开新增模态框
			 */
			showAddModal(){
				this.modal.title='新增语言';
				this.modal.show = true;
				this.pre.code = '';
			},
			/**
			 * 重置弹框表单
			 */
			resetModalForm() {
				this.$refs['modalForm'].resetFields();
				this.modal.form.code = '';
				this.modal.form.motherTongue = null;
				this.modal.form.english = null;
				this.modal.form.translatable = 0;
				this.modal.form.icon = '';
			},
			/**
			 * 模态框保存
			 */
			modalSave() {
				this.$refs['modalForm'].validate((valid) => {
					if (valid) {
                        this.submitModal();
                    } 
               });
			},
			/**
			 * 提交模态框事件
			 */
			submitModal() {
				if(this.isEdit) {
					this.editModal();
				} else {
					this.saveModal();
				}
			},
			/**
			 * 保存模态框
			 */
			saveModal() {
				let postData_ = this.modal.form;
				const _this = this;
				this.axios.post('/ws/ops/v2/language', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('新增语言类别成功');
						_this.modalCancel();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增语言类别失败:' + message_);
					}
				});
			},
			/**
			 * 修改模态框
			 */
			editModal() {
				let postData_ = this.modal.form;
				const _this = this;
				this.axios.put('/ws/ops/v2/language', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改语言成功');
						_this.modalCancel();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改语言失败:' + message_);
					}
				});
			},
			/**
			 * 模态框取消
			 */
			modalCancel() {
				this.resetModalForm();
				this.modal.show = false;
			},
            /**
			 * 打开新增模态框
			 */
			showEditModal(rowData){
				this.modal.title='修改语言';
				this.initModalData(rowData.code);
			},
			/**
			 * 初始化模态框数据
			 */
			initModalData(code) {
				this.pre.code = code;
				let _this = this;
				this.axios.get('/ws/ops/v2/languages/' + code).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildModalData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建模态框的图片
			 */
			buildModalData(data) {
				this.modal.form.code = data.code;
				this.modal.form.motherTongue = data.motherTongue;
				this.modal.form.english = data.english;
				this.modal.form.translatable = data.translatable;
				this.modal.form.icon = data.icon;
				
				this.modal.show = true;
			},
			/**
			 * 删除
			 */
			delModalRow(row) {
				let code = row.code;
				let _this = this;
				this.axios.delete('/ws/ops/v2/languages/' + code).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.init();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 格式化
			 */
			tparse(str) {
				return twemoji.parse(str);
			}
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.title-row {
		padding: 10px;
	}
	.ws-icon {
		font-size: 30px;
	}
</style>
<style>
	img.emoji {
	    width: 2em !important;
	    height: 2em !important;
	}
</style>